<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>迅雷首页</title>

    <link rel="stylesheet" href="css/jquery.fullPage.css">
    <script src="js/xunlei/jquery-1.8.3.min.js"></script>
    <script src="js/xunlei/jquery.fullPage.min.js"></script>
    <link rel="stylesheet" href="icon/iconfont.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/xunlei.css">
    <!--<link rel="stylesheet" href="../../../bootstrap-3.3.7-dist/css/bootstrap.css">-->
    <!--<script src="../../../bootstrap-3.3.7-dist/js/bootstrap.js"></script>-->

</head>
<body>
<div class="nav">
    <!--顶部导航-->
    <div class="top">
        <div class="left">
            <img src="images/迅雷图片/logo.png" alt="">
        </div>
        <ul class="right">
            <li class="produce">
                <a href="#">
                    <i class="iconfont">&#xe65d;</i>
                    <span>&nbsp;&nbsp;产品中心</span>
                </a>

            </li>
            <li class="more">
                <a href="">
                    <i class="iconfont">&#xe65d;</i>
                    <span>&nbsp;&nbsp;更多</span>
                </a>

            </li>
        </ul>
    </div>
    <!--侧边栏-->
    <div class="slide"></div>
</div>
<div class="container" id="main">
    <div class="page1 section">
        <p>技术 &nbsp;共享 &nbsp;娱乐</p>
    </div>
    <div class="page2 section">
        <ul class="carousel_ul">
            <li class="carousel_li on">
                <p class="one">迅雷X测试版</p>
                <p class="two">         </p>
                <a href="#" class="three">立即下载</a>
                <p class="four">836604人赞过</p>
            </li>
            <li class="carousel_li">
                <p class="one">Mac迅雷影音</p>
                <p class="two">         </p>
                <a href="#" class="three">立即下载</a>
                <p class="four">214440人赞过</p>
            </li>
            <li class="carousel_li">
                <p class="one">Mac迅雷</p>
                <p class="two">         </p>
                <a href="#" class="three">立即下载</a>
                <p class="four">836604人赞过</p>
            </li>
            <li class="carousel_li">
                <p class="one">迅雷Android</p>
                <p class="two">         </p>
                <a href="#" class="three">立即下载</a>
                <p class="four">777777人赞过</p>
            </li>
            <li class="carousel_li">
                <p class="one">迅雷U享版</p>
                <p class="two">         </p>
                <a href="#" class="three">立即下载</a>
                <p class="four">111111人赞过</p>
            </li>
        </ul>
        <ul class="tip">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="page3 section">
        <div class="container">
            <div class="left">
                <div class="top"></div>
                <div class="bottom"></div>
            </div>
            <div class="right"></div>
        </div>
    </div>
    <div class="page4 section">
        <div class="contain">
            <div class="left"><img src="images/迅雷图片/03.png"/></div>
            <div class="right">
                <div class="top"><img src="images/迅雷图片/01.jpg"/></div>
                <div class="bottom">
                    <div class="b_left"><img src="images/迅雷图片/02.png"/></div>
                    <div class="b_right"><img src="images/迅雷图片/07.png"/></div>
                </div>
            </div>
        </div>

    </div>
    <div class="page5 section"></div>
</div>
</body>
</html>

<script>
    $(function () {
        $('#main').fullpage({
            navigation:true,
            anchors:['page1','page2','page3','page4','page5'],
            menu:'menu',
            navigationTooltips: ['首页','吉祥物语','Chow-Lee','晁阳','赵琦'],
            verticalCentered:false,
            sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000']
        });
        /*
         * 轮播图
         * */
        var index=0;
        pics=$('.carousel_ul li');//获取所有的图片
        lis=$('.tip li');//获取所有的小圆点
        page=$(".page2");

//        自动播放
        function change() {
            index++;
            if(index==5){
                index=0;
            }
          changePic();
        }
        setInterval(change,2000);
        function changePic() {//改变图片:增加on属性的同时应该移除兄弟们的on属性
            $(pics[index]).addClass("on").siblings().removeClass("on");
            $(page[0]).css('background-image',"url(images/迅雷图片/p"+(index+2)+".jpg)");
            $(lis[index]).addClass('on').siblings().removeClass('on');//改变小圆点的样式
        }
        lis.hover(function () {
           index=$(this).index();//获得当前对象的索引;并赋值
            setTimeout( changePic,200)//setTimeout一次，setInterval()多次重复
        })
    })

//    $(document).ready(function() {
//        $('#main').fullpage({
//            //Navigation
//            menu: false,//绑定菜单，设定的相关属性与anchors的值对应后，菜单可以控制滚动，默认为false。
//            anchors:['firstPage', 'secondPage'],//anchors定义锚链接，默认为[]
//            lockAnchors: false,//是否锁定锚链接，默认为false,设为true后链接地址不会改变
//            navigation: false,//是否显示导航，默认为false
//            navigationPosition: 'right',//导航小圆点的位置
//            navigationTooltips: ['firstSlide', 'secondSlide'],//导航小圆点的提示
//            showActiveTooltip: false,//是否显示当前页面的tooltip信息
//            slidesNavigation: true,//是否显示横向幻灯片的导航，默认为false
//            slidesNavPosition: 'bottom',//横向导航的位置，默认为bottom，可以设置为top或bottom
//
//            //Scrolling
//            css3: true,//是否使用CSS3 transforms来实现滚动效果，默认为true
//            scrollingSpeed: 700,//设置滚动速度，单位毫秒，默认700
//            autoScrolling: true,//是否使用插件的滚动方式，默认为true,若为false则会出现浏览器自带滚动条
//            fitToSection: true,//设置是否自适应整个窗口的空间，默认值：true
//            scrollBar: false,//是否包含滚动条，默认为false,若为true浏览器自带滚动条出现
//            easing: 'easeInOutCubic',//定义页面section滚动的动画方式，若修改此项需引入jquery.easing插件
//            easingcss3: 'ease',//定义页面section滚动的过渡效果，若修改此项需引入第三方插件
//            loopBottom: false,//滚动到最低部后是否连续滚动到顶部，默认为false
//            loopTop: false,//滚动到最顶部后是否连续滚动到底部，默认为false
//            loopHorizontal: true,//横向slide幻灯片是否循环滚动，默认为true
//            continuousVertical: false,//是否循环滚动，不兼容loopTop和loopBottom选项
//            normalScrollElements: '#element1, .element2',//避免自动滚动，滚动时的一些元素，例如百度地图
//            scrollOverflow: false,//内容超过满屏后是否显示滚动条，true则显示滚动条，若需滚动查看内容还需要jquery.slimscroll插件的配合
//            touchSensitivity: 15,//在移动设备中滑动页面的敏感性，默认为5最高100，越大越难滑动
//            normalScrollElementTouchThreshold: 5,
//
//            //Accessibility
//            keyboardScrolling: true,//是否可以使用键盘方向键导航，默认为true
//            animateAnchor: true,//锚链接是否可以控制滚动动画，默认为true,若为false则锚链接定位失效
//            recordHistory: true,//是否记录历史，默认为true,浏览器的前进后退可导航。若autoScrolling:false,那么这个属性将被关闭
//
//            //Design
//            controlArrows: true,//定义是否通过箭头来控制slide,默认true
//            verticalCentered: true,//定义每一页的内容是否垂直居中，默认true
//            resize : false,//字体是否随窗口缩放而缩放，默认false
//            sectionsColor : ['#ccc', '#fff'],//为每个section设置background-color属性
//            paddingTop: '3em',//设置每一个section顶部的padding,默认为0
//            paddingBottom: '10px',//设置每一个section底部的padding,默认为0
//        fixedElements: '#header, .footer',//固定元素，默认为null,需要配置一个jquery选择器，在页面滚动时，fixElements设置的元素不滚动
//        responsiveWidth: 0,
//            responsiveHeight: 0,
//
//            //Custom selectors
//            sectionSelector: '.section',//section选择器。默认为.section
//            slideSelector: '.slide',//slide选择器，默认为.slide
//
//            //events
//            onLeave: function(index, nextIndex, direction){},
//        afterLoad: function(anchorLink, index){},
//        afterRender: function(){},
//        afterResize: function(){},
//        afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
//        onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
//    });
//    });
</script>